<?php 

/*	Author: Gustavo Palacios
	Author: Fernando Rodas

	Project: EPS, Ciencias y Sistemas, USAC. 2014-2015	
	*/
	
		?>
<!DOCTYPE html>
<html>
    <?php
	require_once("clases/funciones.php");
	$plantilla = new Funciones;
	echo $plantilla->headerAdmin("Productos CEMA","Gestionamiento de productos","Administrador Sitio","Productos"); 
	?>
	<head>
	
	  <!-- jQuery 2.0.2 -->
        <script src="js/jquery.min.js"></script>
	
	<script>
	var idnoticia = 0;
	var imgnoticia = "";
	var pdfnoticia = "";
	
$(document).ready(function() {

//AJAX DE SUBMIT
	$('#noticiaForm').submit(function(event){
		event.preventDefault();
		var fd = new FormData(this);
		fd.append("tipo", "29");
		$.ajax({
			url: "clases/Intermedio.php",
			type: "POST",
			data:  fd,
			contentType: false,
			cache: false,
			processData:false,
			beforeSend: function () {
			$('#myModal').modal('hide');
			$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
            },
			success: function(data){
				cargarNoticias();
				$("#test").html(data);
				$("#titulo").val("");
				$("#fecha").val("");
				$("#resumen").val("");
				$("#contenido").val("");
				$("#imagen").val("");
				$("#archivo").val("");
				$("#imgSalida").val("");
				imagen = document.getElementById("imgSalida");
				padre = imagen.parentNode;
				padre.removeChild(imagen);
				
			},
			error: function(){} 	        
		});
	});
	
	$('#noticiaFormModif').submit(function (event) {
		event.preventDefault();
		var fd = new FormData(this);
		fd.append("tipo","31");
		fd.append("idnoticia",idnoticia);
		fd.append("imgActual",imgnoticia);
		fd.append("pdfActual",pdfnoticia);
		$.ajax({
			url: "clases/Intermedio.php",
			type: "POST",
			data:  fd,
			contentType: false,
			cache: false,
			processData:false,
			beforeSend: function () {
			$("#modalmodif").modal('hide');
			$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
            },
			success: function(data){
				$("#test").html(data);
				
				cargarNoticias();
			},
			error: function(){} 	        
		});
	});


});
	
	
	window.onload = cargarNoticias();
	function cargarNoticias() {
	 
		$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
		var fd = new FormData();
		fd.append("tipo", "28");
		$.ajax({
			url: "clases/Intermedio.php",
			type: "POST",
			data:  fd,
			contentType: false,
			cache: false,
			processData:false,
			success: function(data){
				$("#datos").html(data);

			},
			error: function(){} 	        
		});
	}
	
	function eliminarNoticia() {
	
		var fd = new FormData();
		fd.append("tipo", "30");
		fd.append("imagen",imgnoticia);
		fd.append("pdf", pdfnoticia);
		fd.append("idNoticia", idnoticia);
		$.ajax({
			url: "clases/Intermedio.php",
			type: "POST",
			data:  fd,
			contentType: false,
			cache: false,
			processData:false,
			beforeSend: function () {
			$("#borrarNoticia").modal('hide');
			$("#datos").html('<p align="center"><img src="img/cargando.GIF"/></p>');
            },
			success: function(data){
				$("#test").html(data);
				
				cargarNoticias();

			},
			error: function(){} 	        
		});
	
	
	}
	
	
	
	</script></head>
	
	
	
	
	<!-- Main content -->
                <section class="content">
					<div id="test">
					
					</div>
					
					<!--Comienzo de la tabal -->
					<div class="row">
                        <div class="col-xs-12">
						
						<div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Lista de Noticias</h3>                                    
                                </div><!-- /.box-header -->
								
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Agregar nueva noticia</button>
                             
                                <div class="box-body table-responsive">
									
									<div id="datos">
                                        <p align="center"><img src="img/cargando.GIF"/></p>
                                        
                                    </div>
									
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
				 
						</div>
                    </div>
					<!--Fin tabla -->
					
					
					
					
					
					</section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
		
	

<!------------------------------ Modal AGREGAR NUEVA NOTICIA---------------------->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4>
      </div>
      <div class="modal-body">
        
			<!------------------ FORMULARIO DE NOTICIAS ------------->
		
			<form id="noticiaForm" method="post">
				<div class="form-group">
                    <div class="form-group">
						<b>Título</b>
						<input type="text" maxlength="25" class="form-control" id="titulo" name="titulo">
					</div>
					
					<div class="form-group">
						<label>Fecha</label>
						<div class="input-group">	
							<div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                                </div>
								<input id="fecha" name="fecha" type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask/>
						</div>
					</div>
					
					<div class="form-group">
						<b>Resumen</b>
						<input type="text" class="form-control" maxlength="41" id="resumen" name="resumen" >
					</div>
					
					<div class="form-group">
                        <label>Contenido</label>
                        <textarea class="form-control" rows="4" maxlength="500" placeholder="Descripcion de la noticia ..." id="contenido" name="contenido"></textarea>
                    </div>						
					
					<div class="form-group">
						<b>Imagen<b>
						<p class="help-block">Seleccionar una imagen para la noticia.</p>
							
							<input type="file" id="imagen" name="imagen" accept="image/jpg,image/jpeg,image/gif,image/png">
						
						<output id="salida" name="salida"></output>
					</div>
					
					<div class="form-group">
						<b>Archivo (.pdf)<b>
						<p class="help-block">Seleccionar un archivo.</p>
							
							<input type="file" id="archivo" name="archivo" accept="application/pdf">
						
					</div>
					
				</div>	
			<!----------------------- FORMULARIO DE NOTICIAS --------------------->	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary" name="agregarNoticia">Guardar</button>
      </div>
		</form>
    </div>
  </div>
</div>
<!----------------------------- FIN DE MODAL AGREGAR NOTICIA ------------------------->

<!------------------------------------ MODAL PARA ELIMINAR NOTICIA  ----------------------------------------->
		<div class="modal fade" id="borrarNoticia" tabindex="-1" role="dialog" aria-labelledby="borrarNoticiaLabel" aria-hidden="true">
						<div class="modal-dialog">
						<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
					<h4 class="modal-title" id="myModalLabel">Eliminar</h4>
				</div>
				<div class="modal-body">
				
				<h3><i class="fa fa-warning text-yellow"></i> Esta Seguro de Eliminar esta Noticia? </h3>
				
				</div>
				
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="eliminarNoticia()">Aceptar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				</div>
				</div>
				</div>
		</div>'

<!------------------------------------FINAL MODAL PARA ELIMINAR PRODUCTO  ----------------------------------------->



<!------------------------------------ MODAL PARA MODIFICAR NOTICIA  ----------------------------------------->
					<div class="modal fade" id="modalmodif" tabindex="-1" role="dialog" aria-labelledby="modalmodifLabel" aria-hidden="true">
						<div class="modal-dialog">
						<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
					<h4 class="modal-title" id="modalmodifLabel">Modificar Noticia</h4>
				</div>
				<div class="modal-body">
				<form id="noticiaFormModif" method="post">
				<b>Título</b>
						<input type="text" maxlength="25" class="form-control" id="tituloModif" name="tituloModif" value="" >&nbsp;<br>
						
				<label>Fecha</label>
						<div class="input-group">	
							<div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                                </div>
								<input id="fechaModif" name="fechaModif" type="text" class="form-control" value="" />
						</div>
			<br>
						
				<b>Resumen</b>
						<input type="text" class="form-control" maxlength="41" id="resumenModif" name="resumenModif" value="">&nbsp;
				<br>		
				<label>Contenido</label>
                        <textarea class="form-control" rows="4" maxlength="500" placeholder="Descripcion de la noticia ..." id="contenidoModif" name="contenidoModif" value=""></textarea>&nbsp;
					<br>	
				<b>Imagen<b>
						<output id="salidaModif" name="salidaModif"><img id="imgSalidaModif" width="150" height="150" src=""/> </output>
						<p class="help-block">Selecione una imagen para cambiar.</p>
							<input type="file" id="imagenModif" name="imagenModif" accept="image/jpg,image/jpeg,image/gif,image/png">&nbsp; &nbsp; 
				<br><br>
				<b>Archivo (.pdf)<b>
						<p class="help-block">Seleccione un archivo para cambiar.</p> 
						<input type="text" name="nombreArch" class="form-control" id="nombreArch" value="" disabled>
							
							<input type="file" id="archivoModif" name="archivoModif" accept="application/pdf">
				
				</div>
	
				<div class="modal-footer">
					<button class="btn btn-primary reserve-button">Guardar Cambios</button>
					<button type="submit" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				</div>
				</form>
				</div>
				</div>
			</div>'

<!------------------------------------FINAL MODAL PARA MODIFICAR PRODUCTO  ----------------------------------------->

	
		
		
		 <!-- jQuery 2.0.2 -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="js/plugins/AdminLTE/app.js" type="text/javascript"></script>
  <!-- DATA TABES SCRIPT -->
        <script src="js/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
        <script src="js/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
		
		
        <!-- InputMask -->
        <script src="js/plugins/input-mask/jquery.inputmask.js" type="text/javascript"></script>
        <script src="js/plugins/input-mask/jquery.inputmask.date.extensions.js" type="text/javascript"></script>
        <script src="js/plugins/input-mask/jquery.inputmask.extensions.js" type="text/javascript"></script>
 
		
		<script type="text/javascript">
                $(function() {
			    //Datemask dd/mm/yyyy
                $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
                //Money Euro
                $("[data-mask]").inputmask();
				});
				
				function archivo(evt) {
				var files = evt.target.files; // FileList object
       
				//Obtenemos la imagen del campo "file". 
				for (var i = 0, f; f = files[i]; i++) {         
				//Solo admitimos imágenes.
					if (!f.type.match('image.*')) {
						continue;
					}
       
					var reader = new FileReader();
           
					reader.onload = (function(theFile) {
						return function(e) {
						// Creamos la imagen.
							document.getElementById("salida").innerHTML = ['<img id="imgSalida" width="150" height="150" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
						};
					})(f);
 
					reader.readAsDataURL(f);
				}		
				}
             
      document.getElementById('imagen').addEventListener('change', archivo, false);
				
				function borrarId( idelimina, imgelimina, imgpdf) {
				
				window.idnoticia = idelimina;
				window.imgnoticia = imgelimina;
				window.pdfnoticia = imgpdf;
				
				}
				
				
				function modificarId(idmodif, titulomodif,fechamodif, adelantomodif,contenidomodif, imagenmodif, pdfmodif) {
				
					document.getElementById('tituloModif').value=titulomodif;
					document.getElementById('fechaModif').value=fechamodif;
					document.getElementById('resumenModif').value=adelantomodif;
					var cod = document.getElementById('conteModalModif' + contenidomodif).innerHTML;
					document.getElementById('contenidoModif').value = cod;
					document.getElementById('imgSalidaModif').src=imagenmodif;
					document.getElementById('nombreArch').value=pdfmodif;
					document.getElementById('imagenModif').value="";
					document.getElementById('archivoModif').value="";
					window.idnoticia = idmodif;
					window.imgnoticia = imagenmodif;
					window.pdfnoticia = pdfmodif;
				
				}
				
				
				function archivo2(evt) {
				var files = evt.target.files; // FileList object
       
				//Obtenemos la imagen del campo "file". 
				for (var i = 0, f; f = files[i]; i++) {         
				//Solo admitimos imágenes.
					if (!f.type.match('image.*')) {
						continue;
					}
       
					var reader = new FileReader();
           
					reader.onload = (function(theFile) {
						return function(e) {
						// Creamos la imagen.
							document.getElementById("imgSalidaModif").src=e.target.result;
						};
					})(f);
 
					reader.readAsDataURL(f);
				}		
				}
				
				document.getElementById('imagenModif').addEventListener('change', archivo2, false);
	
				
		</script>
		</body>
	<?php
	echo $plantilla->footerAdmin();
	?>
</html>